﻿<!DOCTYPE html>
<html lang="en" class="demo-2 no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>KinectShop</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script src="js/snap.svg-min.js"></script>
    	<script src="js/jquery.knob.js"></script>
    	<script src="js/jquery.transit.min.js"></script>
    	<script src="js/kinectCliente.js"></script>
    	
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
<body style="background-color:rgb(90, 103, 124);">
	<div class="container" style="" >
		<header class="codrops-header">
			<h1>Kinect Shopping Project <span>Uma nova experiencia em interação</a></span></h1>
		</header>
		<!-- Container dos itens do menu { lojas, alimentação,localizacao,cinema } -->
		<section id="grid" class="grid clearfix" style="">
			<!-- Cada item a corresponde a um intem completo do menu -->
			<!-- Item lojas -->
			<a href="#" id="lojas" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
				<figure>
					<img src="img/6.png">
					<svg id="svg1" class="itemMenu" viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "></path><desc>Created with Snap</desc><defs></defs></svg>
					<figcaption>
						<h2>Lojas</h2>
						<p>Encontre o que você precisa</p>
						<button>View</button>
					</figcaption>
				</figure>
			</a>
			<!-- Fim Item lojas -->
			<!-- Item Alimentacao -->
			<a href="#" id="alimentacao" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
				<figure>
					<img src="img/a.png">
					<svg id="svg1" class="itemMenu" viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "></path><desc>Created with Snap</desc><defs></defs></svg>
					<figcaption>
						<h2>Alimentação</h2>
						<p>Esta com fome?</p>
						<button>View</button>
					</figcaption>
				</figure>
			</a>
			<!-- Fim Item alimentacao -->
			<!-- Item orientacao -->
			<a href="#" id="orientacao" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
				<figure>
					<img src="img/7.png">
					<svg id="svg2" class="itemMenu" viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "></path><desc>Created with Snap</desc><defs></defs></svg>
					<figcaption>
						<h2>Orientação</h2>
						<p>Perdido? veja o mapa do shopping.</p>
						<button>View</button>
					</figcaption>
				</figure>
			</a>
			<!-- Fim Item orientacao -->
			<!-- Item cinema -->
			<a href="#" id="cinema" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
				<figure>
					<img src="img/8.png">
					<svg id="svg3" class="itemMenu" viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "></path><desc>Created with Snap</desc><defs></defs></svg>
					<figcaption>
						<h2>Cinema</h2>
						<p>Buscando um bom filme? confira os nossos</p>
						<button>View</button>
					</figcaption>
				</figure>
			</a>
		</section>
		</div><!-- /container -->
		<!-- Container de status de conexão -->
		<div style="position:absolute;top:20px;left:20px;">Status: <label id="status">None</label></div>
		<!-- Component loading -->
		<div class="demo"   id="loading" style="display:none;position:absolute;top:10px;right:10px; color:#FFF;margin-left:-90px;margin-top:-90px;z-index:9999991">
        	<input class="knob" data-linecap="round" data-displayInput="false" data-width="180" data-angleOffset="180" data-fgColor="rgb(135, 206, 235)" data-skin="tron" data-thickness=".2" value="0"  data-min="0" data-max="100">
    	</div>
    	<!-- Load hadouken gif e poe com estado de oculta -->
    	<div style="position:absolute;top:0;width:100%">
    		<img id="hadouken" src="img/hadouken.gif" style="display:none;position:absolute;margin:auto 0px;width:100%;z-index:9999992">
    	</div>
    	<!-- Cria container da mensagem obrigado -->
    	<div id="obrigado" style="display:none">
    		<h1 style="margin-top:60px;text-align: center;font-size:50px;color: black;">Obrigado</h1>
    	</div>
	</body>
	<script src="js/app.js"></script>
</html>